<template>
  <div class="dialog-form">
    <Header />
    <div class="breadcrumb">
      {{ t('crew.i_b3') }}
    </div>

    <div
      class="main"
      style="padding: 10px"
    >
      <el-form
        ref="formEl"
        class="dialog-form"
        :rules="rules"
        :model="recruitFrom"
        label-width="100px"
      >
        <el-form-item
          :label="t('crew.recruit.l1')"
          prop="recruitDuties"
        >
          <el-select v-model="recruitFrom.recruitDuties" filterable>
            <el-option
              v-for="item in dictData.duties"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="t('crew.recruit.l3')"
          prop="crewLocation"
        >
          <el-select v-model="recruitFrom.crewLocation"  filterable>
            <el-option
              v-for="item in countryOptionList"
              :key="item.countryName"
              :label="item.countryName"
              :value="item.countryName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="t('crew.recruit.l4')"
          prop="shippingType"
        >
          <el-select v-model="recruitFrom.shippingType" filterable>
            <el-option
              v-for="item in dictData.ships_type"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="t('crew.recruit.l6')"
          prop="navigationArea"
        >
          <el-input
            v-model="recruitFrom.navigationArea"
            :placeholder="t('input_p')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="t('crew.recruit.l5')"
          prop="deadweightTon"
        >
          <el-input
            v-model="recruitFrom.deadweightTon"
            :placeholder="t('input_p')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="t('crew.recruit.l10')"
          prop="yearOfConstruction"
        >
          <el-date-picker
            v-model="dateTime.yearOfConstruction"
            type="year"
            :placeholder="t('select_p')"
            @change="dateChange2($event, 'yearOfConstruction')"
          />
        </el-form-item>
        <el-form-item
          :label="t('crew.recruit.l11')"
          prop="onDutyTime"
        >
          <el-date-picker
            v-model="dateTime.onDutyTime"
            type="date"
            :placeholder="t('select_p')"
            @change="dateChange2($event, 'onDutyTime')"
          />
        </el-form-item>
        <el-form-item
          :label="t('crew.recruit.l9')"
          prop="recruitIllustrate"
        >
          <el-input
            v-model="recruitFrom.recruitIllustrate"
            type="textarea"
            resize="none"
            :autosize="{ minRows: 6, maxRows: 6 }"
            :maxlength="500"
            show-word-limit
            :placeholder="t('input_p')"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="sub-box">
      <el-button
        type="primary"
        @click="addSave"
        class="sub-btn mt-2 mb-4"
      >
        {{ t('crew.sub') }}
      </el-button>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import Header from '../layout/Header.vue'
import { listPage, getRecuitList, addRecuit, bannerList } from '@/service/crew.js'
import { countryListApi } from '@/service/common.js'
import router from '@/router'
import useDict from '@/hooks/useDict'
import { openUrl } from '@/utils'

import { showSuccessToast, showFailToast } from 'vant'
import 'vant/es/toast/style'

const { dictData, getDictData } = useDict()
const { t, locale } = useI18n()

const recruitFrom = ref({
  enterpriseId: JSON.parse(localStorage.getItem('login')).userInfo.enterpriseId
})

const rules = ref({
  recruitDuties: [{ required: true, message: t('select_p'), trigger: 'change' }],
  recruitNumber: [{ required: true, message: t('input_p'), trigger: 'change' }],
  crewLocation: [{ required: true, message: t('select_p'), trigger: 'change' }],
  shippingType: [{ required: true, message: t('select_p'), trigger: 'change' }]
})

const dialogRecruit = ref(false)
const countryOptionList = ref([])
const crewList = ref([])
const recuitList = ref([])
const activeIndex = ref(1)
const queryForm = ref({
  pageSize: 10,
  pageNum: 1,
  crewLocation: undefined,
  duties: undefined,
  nextSignOnDate: undefined
})
const recuitQueryForm = ref({
  pageSize: 10,
  pageNum: 1,
  crewLocation: undefined,
  duties: undefined,
  shippingType: undefined
})

const addCrewFn = () => {
  router.push({ path: '/addCrewResume', query: { pageType: 'add' } })
}

//
const dateTime = ref({
  yearOfConstruction: null,
  onDutyTime: null
})
const dateChange2 = (val, key) => {
  if (val) {
    // 10位时间戳
    recruitFrom.value[key] = String(val).substring(0, 10) * 1
  } else {
    recruitFrom.value[key] = null
  }
}

const formEl = ref(null)
const addSave = () => {
  if (!formEl.value) return
  formEl.value.validate((valid, fields) => {
    if (valid) {
      addRecuit(recruitFrom.value).then(({ msg }) => {
        recruitFrom.value = { enterpriseId: JSON.parse(localStorage.getItem('login')).userInfo.enterpriseId }
        router.go(-1)
        showSuccessToast(msg)
      })
    }
  })
}

const onQuery = () => {
  queryForm.value.pageNum = 1
  getList()
}
const getList = () => {
  listPage(queryForm.value).then((res) => {
    crewList.value = res.rows
  })
}
const detailLink = (item) => {
  openUrl('/crewResume', { id: item.id })
}
const dateChange = (val, key) => {
  if (val) {
    // 10位时间戳
    queryForm.value[key] = String(val).substring(0, 10) * 1
  } else {
    queryForm.value[key] = null
  }
}
const getRecuitListFn = () => {
  getRecuitList(recuitQueryForm.value).then((res) => {
    recuitList.value = res.rows
  })
}

const headBannerList = ref([])
const init = () => {
  bannerList({ bannerModel: 7 }).then((res) => {
    let imgArr = res.data.bannerImage.split(',')
    let hrefArr = res.data.bannerHref.slice(0, res.data.bannerHref.length - 1).split(',')
    headBannerList.value = imgArr.map((item, index) => {
      return {
        bannerImage: item,
        bannerHref: hrefArr[index]
      }
    })
  })
  //   getList()
  getRecuitListFn()
  countryListApi().then((res) => {
    countryOptionList.value = res.data
  })
  getDictData('resume_work_status')
  getDictData('duties')
  getDictData('ships_type')
  getDictData('sys_user_sex')
}
onMounted(() => {
  init()
})
</script>
<style scoped lang="scss">
.g-con-m {
  padding: 10px;
}
.breadcrumb {
  background: #252628;
  color: #fff;
  padding: 12px 20px;
  font-weight: bold;
}

:deep(.el-dialog__title) {
  color: rgba(202, 42, 2, 1);
}

.dialog-form {
  :deep(.el-input-number__decrease),
  :deep(.el-input-number__increase) {
    width: 100px;
    :deep(.el-icon) {
      width: 48px;
      svg {
        font-size: 14px;
      }
    }
  }
  :deep(.el-input__inner) {
    height: 40px;
    border: none;
  }

  :deep(.el-input__wrapper) {
    height: 40px;
    background: rgba(245, 245, 245, 1);
    font-size: 14px;
  }

  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-textarea__inner) {
    font-size: 14px;
  }
  .sub-box {
    margin: auto;
    .sub-btn {
      width: 100%;
      height: 40px;
      background: #252628;
      border-radius: 4px;
      font-weight: 400;
      color: #ffffff;
      border: none;
    }
    :deep(.el-button) {
      span {
        font-size: 14px;
      }
    }
  }
}
</style>
